<template>
  <el-container>
    <el-header class="auditor_header">
      历史申报记录
    </el-header>
    <el-main>
      <el-dialog v-model="centerDialogVisible" title="申报详情" width="60%" center>
    <span>
       <el-row>
    <el-col :span="4">用户名</el-col>
    <el-col :span="20">{{ informData[currentRow - 1].username }}</el-col>
  </el-row>
         <el-row>
    <el-col :span="4">申请时间</el-col>
    <el-col :span="20">{{ informData[currentRow - 1].applyDate }}</el-col>
  </el-row>
         <el-row>
    <el-col :span="4">开始时间</el-col>
    <el-col :span="20">{{ informData[currentRow - 1].beginDate }}</el-col>
  </el-row>
         <el-row>
    <el-col :span="4">结束时间</el-col>
    <el-col :span="20">{{ informData[currentRow - 1].endDate }}</el-col>
  </el-row>
         <el-row>
    <el-col :span="4">途经城市</el-col>
    <el-col :span="20">{{ informData[currentRow - 1].passCities }}</el-col>
  </el-row>
         <el-row>
    <el-col :span="4">起点</el-col>
    <el-col :span="20">{{ informData[currentRow - 1].roadBeginName }}</el-col>
  </el-row>
         <el-row>
    <el-col :span="4">终点</el-col>
    <el-col :span="20">{{ informData[currentRow - 1].roadEndName }}</el-col>
  </el-row>
         <el-row>
    <el-col :span="4">所选路线</el-col>
    <el-col :span="20">{{ informData[currentRow - 1].ChooseRoad }}</el-col>
  </el-row>
         <el-row>
    <el-col :span="4">车牌号</el-col>
    <el-col :span="20">{{ informData[currentRow - 1].truckLicense }}</el-col>
  </el-row>
    </span>

        <template #footer>
      <span class="dialog-footer">
<!--        <el-button @click="centerDialogVisible = false">C</el-button>-->
        <el-button type="primary" @click="centerDialogVisible = false">
          返回
        </el-button>
      </span>
        </template>
      </el-dialog>
      <el-row>
        <el-radio-group v-model="radio1" class="ml-4" @change="changePage">
          <el-radio :label="0" size="large">全部历史记录</el-radio>
          <el-radio :label="1" size="large">已通过的历史记录</el-radio>
          <el-radio :label="2" size="large">未通过的历史记录</el-radio>
        </el-radio-group>
      </el-row>
      <el-table :data="informData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe
                style="width: 100%">
        <el-table-column prop="id" label="序号"/>
        <el-table-column prop="applyDate" label="申报时间"/>
        <el-table-column prop="roadBeginName" label="起始地"/>
        <el-table-column prop="roadEndName" label="终点地"/>
        <!--        <el-table-column prop="audit_date" label="审核时间" width="150" />-->
        <el-table-column prop="isPass" label="是否通过"/>
        <el-table-column label="操作">
          <template v-slot:default="scope">
            <!--弹窗实现-->
            <el-button type="primary" @click="centerDialogVisible = true,setCurrentRow(scope.row.id)">
              查看详情
            </el-button>
            <!--/弹窗实现-->
            <el-popconfirm title="确定要删除吗?"
                           @confirm="deleteInform(informData[scope.row.id-1+(currentPage - 1) * pageSize].roadApplyLogsId)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
          background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
      />
    </el-footer>
  </el-container>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "historyReview",
  data() {
    return {
      radio1: 0,
      centerDialogVisible: false,
      currentPage: 1,
      pageSize: 5,
      total: 1,
      currentRow: 1,
      informData: [
        // {
        //   id: 1,
        //   apply_date: '2022-10-11',
        //   road_begin: "长沙市",
        //   road_end: "常德市",
        //   audit_date: '2022-10-29',
        //   whether_pass: '是'
        // },
        // {
        //   id: 1,
        //   apply_date: '2022-10-13',
        //   road_begin: "长沙市",
        //   road_end: "湘潭市",
        //   audit_date: '2022-10-29',
        //   whether_pass: '否'
        // },
      ]


    }

  },
  mounted() {
    let userjson = sessionStorage.getItem('user')
    let user = JSON.parse(userjson)
    axios({
      method: 'post',
      url: '/api/road_apply_logs/getHsitoryPage',
      // url:'http://127.0.0.1:4523/m1/1840267-0-default/road_apply_logs/getHsitoryPage',
      data: {
        username: user.username,
      },

    })
        .then((res) => {
          if(res.data.success == true){
            this.informData = res.data.data
            for (var i = 0; i < res.data.data.length; i++) {
              this.informData[i].id = i + 1
              if (this.informData[i].whetherUseAdvice == true) {
                this.informData[i].ChooseRoad = this.informData[i].suggestRoad
              } else {
                this.informData[i].ChooseRoad = this.informData[i].initRoad
              }
            }
            this.total = res.data.data.length
          }else{
            this.$message.error(res.data.errorMsg)
          }

        });
  },
  methods: {
    setCurrentRow: function (num) {
      this.currentRow = num
    },
    refresh: function () {
      let userjson = sessionStorage.getItem('user')
      let user = JSON.parse(userjson)
      axios({
        method: 'post',
        url: '/api/road_apply_logs/getHsitoryPage',
        // url:'http://127.0.0.1:4523/m1/1840267-0-default/road_apply_logs/getHsitoryPage',
        data: {
          username: user.username,
        },

      })
          .then((res) => {
            this.informData = res.data.data
            for (var i = 0; i < res.data.data.length; i++) {
              this.informData[i].id = i + 1
              if (this.informData[i].whetherUseAdvice == true) {
                this.informData[i].ChooseRoad = this.informData[i].suggestRoad
              } else {
                this.informData[i].ChooseRoad = this.informData[i].initRoad
              }
            }
            this.total = res.data.data.length
          });
    },
    changePage() {
      if (this.radio1 === 0) {
        this.searchAll()
      } else if (this.radio1 === 1) {
        this.searchPass()
      } else if (this.radio1 === 2) {
        this.searchFailed()
      }
    },
    //查询全部
    searchAll: function () {
      let userjson = sessionStorage.getItem('user')
      let user = JSON.parse(userjson)
      axios({
        method: 'post',
        url: '/api/road_apply_logs/getHsitoryPage',
        data: {
          username: user.username,
        },

      })
          .then((res) => {
            this.informData = res.data.data
            for (var i = 0; i < res.data.data.length; i++) {
              this.informData[i].id = i + 1
              if (this.informData[i].whetherUseAdvice == true) {
                this.informData[i].ChooseRoad = this.informData[i].suggestRoad
              } else {
                this.informData[i].ChooseRoad = this.informData[i].initRoad
              }
            }
            this.total = res.data.data.length
          });
    },
    testAPI: function () {
      axios({
        method: 'post',
        url: 'http://127.0.0.1:4523/m1/1840267-0-default/road_apply_logs/getHsitoryPage',
        data: {
          username: '11',
        },
        params: {},
      })
          .then((res) => {
            this.informData = res.data.data
            for (var i = 0; i < res.data.data.length; i++) {
              this.informData[i].id = i + 1
            }
            this.total = res.data.data.length
          });
    },
    // 删除一条数据
    deleteInform: function (a) {
      axios({
        method: 'post',
        url: '/api/road_apply_logs/deleteHistoryLog',
        data: {
          roadApplyLogsId: a
        },
        params: {},
      })
          .then((res) => {
            if (res.data.success == true) {
              ElMessage.success('删除成功')
            } else if (res.data.success == false) {
              ElMessage.error('删除失败')
            }
            this.refresh()
          });
    },
    //查看已通过审核记录
    searchPass: function () {
      let userjson = sessionStorage.getItem('user')
      let user = JSON.parse(userjson)
      axios({
        method: 'post',
        url: '/api/road_apply_logs/getPassPage',
        data: {
          username: user.username,
        },
        params: {},
      })
          .then((res) => {
            this.informData = res.data.data
            for (var i = 0; i < res.data.data.length; i++) {
              this.informData[i].id = i + 1
              if (this.informData[i].whetherUseAdvice == true) {
                this.informData[i].ChooseRoad = this.informData[i].suggestRoad
              } else {
                this.informData[i].ChooseRoad = this.informData[i].initRoad
              }
            }
            this.total = res.data.data.length
          });
    },
    //查看未通过审核记录
    searchFailed: function () {
      let userjson = sessionStorage.getItem('user')
      let user = JSON.parse(userjson)
      axios({
        method: 'post',
        url: '/api/road_apply_logs/getNotPassPage',
        data: {
          username: user.username,
        },
        params: {},
      })
          .then((res) => {
            this.informData = res.data.data
            for (var i = 0; i < res.data.data.length; i++) {
              this.informData[i].id = i + 1
              if (this.informData[i].whetherUseAdvice == true) {
                this.informData[i].ChooseRoad = this.informData[i].suggestRoad
              } else {
                this.informData[i].ChooseRoad = this.informData[i].initRoad
              }
            }
            this.total = res.data.data.length
          });
    }
  }
}
</script>

<style scoped>
.el-pagination {
  justify-content: center !important;
}

.auditor_header {
  height: 40px;
  text-align: left;
  line-height: 40px;
  font-size: 20px;
  font-weight: bolder;
  border-bottom: rgba(140, 147, 157, 0.38) 1px solid;
}

.el-row {
  margin: 20px;
}

.el-container {
  height: 100%;
  width: 100%;
}

.el-footer {
  text-align: center;
  position: relative;
  bottom: 0px;
}
</style>